<template>
  <view class="detail-container">
    <view :class="['screen', (props.pageFrom == 'Sorder' || props.pageFrom == 'Lorder')?'order-screen':'car-screen']" :style="enumsShow ? 'border-bottom: 1rpx solid #DADBDD;' : ''">
      <view class="screen-i" @click="screenType(0)" v-if="props.pageFrom == 'Sorder'">
        <view :class="['i-name c1 fs24 fw400', chooseTypes.feeType ? 'name-y' : '']">费用类型</view>
        <image class="i-img" v-if="chooseTypes.feeType&&enumsShow&&indexShow==0" src="../../../static/icons/icon-triangle-up.png" mode="widthFix"></image>
        <image class="i-img" v-else-if="chooseTypes.feeType || (chooseTypes.feeType&&!enumsShow)" src="../../../static/icons/icon-triangle-down.png" mode="widthFix"></image>
        <image class="i-img" v-else-if="!chooseTypes.feeType&&enumsShow&&indexShow==0" src="../../../static/icons/icon-select-up.png" mode="widthFix"></image>
        <image class="i-img" v-else-if="!chooseTypes.feeType" src="../../../static/icons/icon-select-down.png" mode="widthFix"></image>
      </view>
      <view class="screen-i" @click="screenType(1)">
        <view :class="['i-name c1 fs24 fw400', chooseTypes.costType ? 'name-y' : '']">收支类型</view>
        <image class="i-img" v-if="chooseTypes.costType&&enumsShow&&indexShow==1" src="../../../static/icons/icon-triangle-up.png" mode="widthFix"></image>
        <image class="i-img" v-else-if="chooseTypes.costType || (chooseTypes.costType&&!enumsShow)" src="../../../static/icons/icon-triangle-down.png" mode="widthFix"></image>
        <image class="i-img" v-else-if="!chooseTypes.costType&&enumsShow&&indexShow==1" src="../../../static/icons/icon-select-up.png" mode="widthFix"></image>
        <image class="i-img" v-else-if="!chooseTypes.costType" src="../../../static/icons/icon-select-down.png" mode="widthFix"></image>
      </view>
      <view class="screen-i" @click="screenType(2)">
        <view :class="['i-name c1 fs24 fw400', chooseTypes.feeStatus ? 'name-y' : '']">费用状态</view>
        <image class="i-img" v-if="chooseTypes.feeStatus&&enumsShow&&indexShow==2" src="../../../static/icons/icon-triangle-up.png" mode="widthFix"></image>
        <image class="i-img" v-else-if="chooseTypes.feeStatus || (chooseTypes.feeStatus&&!enumsShow)" src="../../../static/icons/icon-triangle-down.png" mode="widthFix"></image>
        <image class="i-img" v-else-if="!chooseTypes.feeStatus&&enumsShow&&indexShow==2" src="../../../static/icons/icon-select-up.png" mode="widthFix"></image>
        <image class="i-img" v-else-if="!chooseTypes.feeStatus" src="../../../static/icons/icon-select-down.png" mode="widthFix"></image>
      </view>
      <!-- 补位 -->
      <view class="screen-i" v-if="props.pageFrom != 'Sorder'"></view>
      <!-- 补位 -->
      <view class="screen-i-refresh" @click="refreshAll">
        <image class="i-img-refresh" v-if="(chooseTypes.feeType || chooseTypes.costType || chooseTypes.feeStatus)" src="../../../static/icons/icon-refresh-y.png" mode="widthFix"></image>
        <image class="i-img-refresh" v-else src="../../../static/icons/icon-refresh.png" mode="widthFix"></image>
        <view :class="['i-refresh-name c1 fs24 fw400', (chooseTypes.feeType || chooseTypes.costType || chooseTypes.feeStatus) ? 'i-refresh-name-y' : '']">重置</view>
      </view>
      <view class="line line-1"></view>
      <view class="line line-2"></view>
      <view class="line line-3" v-if="props.pageFrom == 'Sorder'"></view>
    </view>
    <view :class="['select-page', (props.pageFrom == 'Sorder' || props.pageFrom == 'Lorder')?'order-select':'car-select']" v-if="enumsShow">
      <view class="select-i" v-for="(i, index) in enums" :key="index" @click="chooseSelect(i)">
        <view :class="['select-name', ( (indexShow==0&&i.value==chooseTypes.feeType) || (indexShow==1&&i.value==chooseTypes.costType) || (indexShow==2&&i.value==chooseTypes.feeStatus) ) ? 'select-y' : 'select-n']">{{i.name}}</view>
        <image v-if="(indexShow==0&&i.value==chooseTypes.feeType) || (indexShow==1&&i.value==chooseTypes.costType) || (indexShow==2&&i.value==chooseTypes.feeStatus)" class="select-img" src="../../../static/icons/sort-choice.png" mode="widthFix"></image>
      </view>
    </view>
    <view class="pages_back" v-if="enumsShow" @click="enumsShow=false"></view>
  </view>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive } from 'vue'
  import { costScreenOrder, costScreenCar } from '@/api/order/sOrder'
  const emits = defineEmits(['listRefresh'])
  const enumsShow = ref(false)
  const enums = ref()
  const orderFeeTypeEnum = ref() //费用类型
  const orderCostTypeEnum = ref() //收支类型
  const orderFeeStatusEnum = ref() //费用状态
  const chooseTypes = reactive({
    feeType: '',
    costType: '',
    feeStatus: '',
  })
  const indexShow = ref()
  const props = defineProps({
    pageFrom: {
      type: String
    },
  })

  const getScreen = async () => {
    if(props.pageFrom == 'Sorder' || props.pageFrom == 'Lorder'){
      const res = await costScreenOrder()
      // console.log(res)
      orderFeeTypeEnum.value = res.result.orderFeeTypeEnum
      orderCostTypeEnum.value = res.result.costTypeEnum
      orderFeeStatusEnum.value = res.result.orderFeeStatusEnum
    }
    if(props.pageFrom == 'car'){
      const res = await costScreenCar()
      // console.log(res)
      orderFeeTypeEnum.value = res.result.carAssetFeeTypeEnum
      orderCostTypeEnum.value = res.result.costTypeEnum
      orderFeeStatusEnum.value = res.result.feeStatusEnum
    }
  }
  const screenType = (i) => {
    // console.log(i)
    indexShow.value = i
    if(i == 0) {
      enums.value = orderFeeTypeEnum.value
    }
    if(i == 1) {
      enums.value = orderCostTypeEnum.value
    }
    if(i == 2) {
      enums.value = orderFeeStatusEnum.value
    }
    enumsShow.value = true
  }
  const chooseSelect = (e) => {
    // console.log(e)
    if(indexShow.value == 0){
      chooseTypes.feeType = chooseTypes.feeType == e.value ? '' : e.value
    }
    if(indexShow.value == 1){
      chooseTypes.costType = chooseTypes.costType == e.value ? '' : e.value
    }
    if(indexShow.value == 2){
      chooseTypes.feeStatus = chooseTypes.feeStatus == e.value ? '' : e.value
    }
    // console.log('chooseTypes', chooseTypes)
    // 去搜索
    emits('listRefresh', chooseTypes)
    enumsShow.value = false
  }
  const refreshAll = () => {
    chooseTypes.feeType = ''
    chooseTypes.costType = ''
    chooseTypes.feeStatus = ''
    // console.log('chooseTypes', chooseTypes)
    // 去列表页重置
    emits('listRefresh', chooseTypes)
    enumsShow.value = false
  }

  onMounted(()=>{
    getScreen()
  })

</script>

<style lang="scss" scoped>
  .detail-container{
    position: relative;
    .order-screen{
      // #ifdef H5
      top: 172rpx;
      // #endif
      // #ifdef APP-PLUS
      top: 88rpx;
      // #endif
    }
    .car-screen{
      // #ifdef H5
      top: 84rpx;
      // #endif
      // #ifdef APP-PLUS
      top: 0;
      // #endif
    }
    .screen{
      width: 100%;
      height: 86rpx;
      position: fixed;
      background: #ffffff;
      left: 0;
      z-index: 100;
      display: flex;
      justify-content: center;
      align-items: center;
      .line{
        width: 2rpx;
        height: 44rpx;
        background: #DADBDD;
        position: absolute;
        top: 20rpx;
      }
      .line-1{
        left: 27%;
      }
      .line-2{
        left: 54%;
      }
      .line-3{
        left: 81%;
      }
      .screen-i{
        width: 28%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .i-name{

        }
        .name-y{
          color: #3072F6;
        }
        .i-img{
          margin-left: 16rpx;
          width: 24rpx;
          height: 24rpx;
        }
      }
      .screen-i-refresh{
        width: 19%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .i-img-refresh{
          margin-right: 8rpx;
          width: 24rpx;
          height: 24rpx;
        }
        .i-refresh-name{
          color: #DADFE8;
        }
        .i-refresh-name-y{
          color: #3072F6;
        }
      }
    }

    .order-select{
      // #ifdef H5
      top: 252rpx;
      // #endif
      // #ifdef APP-PLUS
      top: 174rpx;
      // #endif
    }
    .car-select{
      // #ifdef H5
      top: 168rpx;
      // #endif
      // #ifdef APP-PLUS
      top: 86rpx;
      // #endif
    }
    .select-page{
      position: fixed;
      z-index: 100;
      left: 0;
      width: 100%;
      background: #ffffff;
      border-radius: 0 0 20rpx 20rpx;
      padding-bottom: 8rpx;
      .select-i{
        padding: 0 32rpx;
        width: 100%;
        height: 76rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .select-name{
          font-size: 28rpx;
        }
        .select-n{
          font-weight: 400;
        }
        .select-y{
          font-weight: 600;
          color: #3072F6;
        }
        .select-img{
          width: 28rpx;
          height: 28rpx;
        }
      }
    }

  }
  .pages_back{
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.6);
  }
</style>
